/**
 * @description 组件样式
 * @author: 陈陈
 * @date: 2025/05/09
 * @phone: 18560000860
 * @email: 18560000860@qq.com
 * @company: 济南晨霜信息技术有限公司 /
 * @business: 承接前后端项目的开发
 */
.pure-button {
    display: var(--pure-button-display, inline-flex);
    margin: var(--pure-button-margin);
    padding: var(--pure-button-padding, 0 1em);
    font-size: var(--pure-button-font-size, 1em);
    font-weight: var(--pure-button-font-weight);
    border-radius: var(--pure-button-border-radius, 5px);
    line-height: var(--pure-button-line-height);
    width: var(--pure-button-width, auto);
    height: var(--pure-button-height, 2.4em);
    background: none;
    border: var(--pure-button-border-width, 0) var(--pure-button-border-style, solid) var(--pure-button-border-color, currentColor);
    position: relative;
    color: var(--pure-button-color, inherit);

    &::before,
    &::after {
        border: none;
        outline: none;
    }

    &::before {
        content: "";
        position: absolute;
        inset: 0;
        background: var(--pure-button-background, var(--pure-background-light));
        z-index: 0;
        opacity: var(--pure-button-background-opacity, 1);
    }

    &__content {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: var(--pure-button-gap, 5px);
        width: 100%;
        height: 100%;
        position: relative;
        z-index: 1;
    }

    &__icon {
        font-size: var(--pure-button-icon-size, 1.25em);
        color: var(--pure-button-icon-color);
        font-weight: var(--pure-button-icon-font-weight);
        flex-shrink: 0;
        margin: var(--pure-button-icon-margin);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        &--loading {
            animation: pure-animation-spin var(--pure-button-loading-animation-duration, 1000ms) var(--pure-button-loading-animation-timing-function, linear) 0s infinite;
            font-size: var(--pure-button-loading-icon-font-size, inherit);
            color: var(--pure-button-loading-icon-color, inherit);
            font-weight: var(--pure-button-loading-icon-font-weight, inherit);
            margin: var(--pure-button-loading-icon-margin, inherit);
        }

        &--front {
            font-size: var(--pure-button-front-icon-font-size, inherit);
            color: var(--pure-button-front-icon-color, inherit);
            font-weight: var(--pure-button-front-icon-font-weight, inherit);
            margin: var(--pure-button-front-icon-margin, inherit);
        }

        &--after {
            font-size: var(--pure-button-after-icon-font-size, inherit);
            color: var(--pure-button-after-icon-color, inherit);
            font-weight: var(--pure-button-after-icon-font-weight, inherit);
            margin: var(--pure-button-after-icon-margin, inherit);
        }
    }

    &--disabled {
        opacity: var(--pure-button-opacity, var(--pure-opacity-disabled));
        cursor: not-allowed;
        pointer-events: none;
    }

    &--theme {
        color: var(--pure-button-color, #ffffff);

        &::before {
            background: var(--pure-button-background, var(--pure-button-theme-value));
        }
    }

    &--ghost {
        color: var(--pure-button-color, var(--pure-button-theme-value));
        border-color: var(--pure-button-border-color, var(--pure-button-theme-value, currentColor));
        border-width: var(--pure-button-border-width, 1px);

        &::before {
            opacity: var(--pure-button-background-opacity, 0.2);
        }
    }

    &--plain {
        color: var(--pure-button-color, var(--pure-button-theme-value));
        border-color: var(--pure-button-border-color, var(--pure-button-theme-value, currentColor));
        border-width: var(--pure-button-border-width, 1px);

        &::before {
            opacity: var(--pure-button-background-opacity, 0);
        }
    }

    &--border {
        border-width: var(--pure-button-border-width, 1px);
    }

    &--block {
        width: var(--pure-button-block-width, 100%);
        display: var(--pure-button-block-display, block);
    }

    &--icon {
        width: var(--pure-button-icon-width, 2.4em);
        height: var(--pure-button-icon-height, 2.4em);
        padding: var(--pure-button-icon-padding, 0);
    }

    &--circle {
        border-radius: var(--pure-button-border-radius, 50%);
    }

    &--link {
        display: var(--pure-button-display, inline-flex);
        border: var(--pure-button-border, none);
        padding: var(--pure-button-padding, 0);
        width: var(--pure-button-width, auto);
        height: var(--pure-button-height, auto);
        color: var(--pure-button-color, var(--pure-button-theme-value, inherit));

        &::before {
            background: var(--pure-button-background, transparent);
        }
    }

    &--underline {
        &::after {
            content: "";
            position: absolute;
            top: var(--pure-button-after-top, auto);
            bottom: var(--pure-button-after-bottom, 0);
            left: var(--pure-button-after-left, 0);
            width: var(--pure-button-after-width, 100%);
            height: var(--pure-button-after-height, 1px);
            background: var(--pure-button-underline-color, currentColor);
            transform: var(--pure-button-after-transform, none);
        }
    }

    &--round {
        border-radius: var(--pure-button-round-radius, 1000px);
    }

    &--square {
        border-radius: var(--pure-button-square-radius, 0);
    }

    &--mini {
        font-size: var(--pure-button-font-size, 0.8em);
        padding: var(--pure-button-padding, 0 0.5em);
        height: var(--pure-button-height, 2em);
    }
}
